<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 50%;width: 50%;"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        show:false,
        text: '数据',
        subtext: ''
    },
    dataZoom:[
        {type:'slider',show:'true'},
    ],
    grid: {
        y2:'20%'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        data:[],
        selected: { 
            '目标' :true
        }  
    },
    color:'rgb(153,238,193)',
    toolbox: {
      show: true,
      feature: {
          mark: { show: true }, // 辅助线标志，上图icon左数1/2/3，分别是启用，删除上一条，删除全部
          dataView: { show: true, readOnly: false },// 数据视图，上图icon左数8，打开数据视图
          magicType: { show: true, type: ['line', 'bar'] },// 图表类型切换，当前仅支持直角系下的折线图、柱状图转换，上图icon左数6/7，分别是切换折线图，切换柱形图
          restore: { show: true }, // 还原，复位原始图表，上图icon左数9，还原
          saveAsImage: { show: true } // 保存为图片，上图icon左数10，保存
      }
    },
    xAxis:  {
        type: 'category',
        boundaryGap: true,
        data: ['2018-07-05','2018-07-06','2018-07-07','2018-07-08'],
        axisLabel: {
            show: true,
            textStyle: {
                fontSize:14,
                color:'#000'
            }
        }
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value}',
            show: true,
            textStyle: {
                fontSize:14,
                color:'#000'
            }
        }
    },
    tooltip:{
        show:true
    },
    series: [
        {
            name:'',
            type:'line',
            data:[80,75,92,90],
            markArea:{
                default: false
            },
            markPoint: {
                data: [],
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: "{b}: {c}",
                            textStyle: {
                            color: '#000'
                            }
                        },
                      textColor : '#000'
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                }
            },
            symbolSize:5,   //拐点圆的大小
            color:'#C33532',  //折线条的颜色
            itemStyle:{
                normal:{
                    lineStyle:{
                        width:3,
                        type:'solid',  //'dotted'虚线 'solid'实线
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    }
                }
            },
            markLine: {
                symbol:"none",
                    data: [
                       {
                           name: '设定日期',
                           type: 'average',
                           xAxis:"2018-07-05",
                            label:{
                                formatter: '{b}: {c}',
                                show:true
                            },
                            lineStyle:{
                                normal:{
                                    position:'inside',
                                    color:"#01C25C",
                                    width:2,
                                    type:"solid"
                                }
                            }
                        },
                        {
                           name: '到达日期',
                           type: 'average',
                           xAxis:"2018-07-08",
                            label:{
                                formatter: '{b}: {c}',
                                show:true
                            },
                            lineStyle:{
                                normal:{
                                    position:'inside',
                                    color:"#C23431",
                                    width:2,
                                    type:"solid"
                                }
                            }
                        },
                        {
                            name: 'min',
                            type: 'average',
                            yAxis:40,
                            lineStyle:{
                                normal:{
                                    color:"#1D9BE3",
                                    width:4,
                                    type:"dashed"
                                }
                            }
                        },
                        {
                            name: 'max',
                            type: 'average',
                            yAxis:100,
                            lineStyle:{
                                normal:{
                                    color:"#C23431",
                                    width:4,
                                    type:"dashed"
                                }
                            }
                        }
                    ]
            }
        },
        {
            name:'目标',
            type:'line',
            animation: false,
            areaStyle: {
                normal: {
                    backgroundColor:'rgba(1,194,92,.3)'
                }
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markArea: {
                data: [[{
                yAxis: '46'
                }, {
                yAxis: '80'
                }]]
            }
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>